<template>
  <RightTableLayout :slotName="['search', 'operation', 'table', 'pagination']">
    <template #search>
      <Query :columns="columns" @query="doQuery"></Query>
    </template>
    <template #operation>
      <el-button @click="add">
        <el-icon>
          <DocumentAdd />
        </el-icon>{{ i18n.fy.新增 }}</el-button>
    </template>
    <template #table>
      <el-table :empty-text="i18n.fy.nodata" :data="data.tableData" border v-loading="data.loading"
        :element-loading-text="i18n.fy.loading">
        <el-table-column prop="userid" label="ID" width="80" align="center" />
        <el-table-column prop="realname" :label="i18n.language === 'zh-cn' ? '用户姓名' : 'realname'" align="center" />
        <el-table-column prop="loginname" :label="i18n.language === 'zh-cn' ? '登录名' : 'loginname'" align="center">
        </el-table-column>
        <el-table-column prop="identitys" :label="i18n.language === 'zh-cn' ? '身份证号' : 'identitys'" align="center"
          width="120" />
        <el-table-column prop="phone" :label="i18n.language === 'zh-cn' ? '用户电话' : 'phone'" align="center"
          width="190" />
        <el-table-column prop="address" :label="i18n.language === 'zh-cn' ? '用户地址' : 'address'" />
        <el-table-column prop="position" :label="i18n.language === 'zh-cn' ? '描述' : 'position'" width="120">
        </el-table-column>
        <el-table-column prop="sex" :label="i18n.language === 'zh-cn' ? '性别' : 'sex'" align="center" width="120">
          <template #default="scope">
            <span style="color: rgb(33, 112, 147)" v-if="scope.row.sex == '1'">
              {{ i18n.language === "zh-cn" ? "男" : "male" }}
            </span>
            <span style="color: red" v-else>
              {{ i18n.language === "zh-cn" ? "女" : "female" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="pwd" :label="i18n.language === 'zh-cn' ? '密码' : 'password'" width="100">
          <template #default="scope"> ****** </template>
        </el-table-column>
        <el-table-column prop="available" :label="i18n.language === 'zh-cn' ? '是否可用' : 'available'" align="center"
          width="120">
          <template #default="scope">
            <span style="color: #217093" v-if="scope.row.available == '1'">
              {{ i18n.language === "zh-cn" ? "可用" : "available" }}
            </span>
            <span style="color: red" v-else>
              {{ i18n.language === "zh-cn" ? "不可用" : "NotAvailable" }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="op" :label="i18n.language === 'zh-cn' ? '操作' : 'operate'" align="center" width="390">
          <template #default="scope">
            <div style="width: auto">
              <a class="layui-btn layui-btn-xs" @click="edit(scope.row)">
                {{ i18n.language === "zh-cn" ? "编辑" : "edit" }}
              </a>
              <a class="layui-btn layui-btn-warm layui-btn-xs" @click="resetUserPwd(scope.row)">
                {{ i18n.language === "zh-cn" ? "重置密码" : "resetpassword" }}
              </a>
              <a class="layui-btn layui-btn-danger layui-btn-xs" @click="del(scope.row)">
                {{ i18n.language === "zh-cn" ? "删除" : "delete" }}
              </a>
              <a v-show="ridList.includes('Admin')" class="layui-btn layui-btn-warm layui-btn-xs"
                @click="selectUserRole(scope.row)">
                {{ i18n.language === "zh-cn" ? "分配角色" : "assigningroles" }}
              </a>
              <a class="layui-btn layui-btn-warm layui-btn-xs" @click="selectUserDevice(scope.row)">
                {{ i18n.language === "zh-cn" ? "分配设备" : "distributionEquipment" }}
              </a>
              <a v-if="ridList.indexOf('Admin') > -1" class="layui-btn layui-btn-xs" @click="assign(scope.row)">分配权限</a>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #pagination>
      <el-pagination @size-change="onChanSize" @current-change="onChanPage" v-model:current-page="data.queryForm.page"
        v-model:page-size="data.queryForm.limit" :total="data.total" />
    </template>
  </RightTableLayout>
  <div style="display: none; padding: 20px; text-align: center" id="saveOrUpdateDiv" class="saveTyps">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "用户姓名" : "UserName" }}
            :</label>
          <div class="layui-input-inline">
            <input type="hidden" name="userid" />
            <input type="text" name="realname" lay-verify="required"
              :placeholder="i18n.language === 'zh-cn' ? '请输入用户姓名' : 'Please enter the user name'" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "登录名称" : "logonName" }}
            :</label>
          <div class="layui-input-inline">
            <input type="text" name="loginname" lay-verify="required"
              :placeholder="i18n.language === 'zh-cn' ? '请输入用户登录名称' : 'Please enter the user login name'"
              autocomplete="off" class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "身份证号" : "ID" }}
            :</label>
          <div class="layui-input-inline">
            <input type="number" name="identitys"
              :placeholder="i18n.language === 'zh-cn' ? '请输入用户身份证号' : 'Please enter the users ID number number'"
              autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "用户地址" : "UserAddress" }}
            :</label>
          <div class="layui-input-inline">
            <input type="text" name="address"
              :placeholder="i18n.language === 'zh-cn' ? '请输入用户地址' : 'Please enter the user address'" autocomplete="off"
              class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "用户电话" : "UserPhone" }}
            :</label>
          <div class="layui-input-inline">
            <input type="number" name="phone"
              :placeholder="i18n.language === 'zh-cn' ? '请输入用户电话' : 'Please enter the users phone number'"
              autocomplete="off" class="layui-input" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "用户描述" : "UserStory" }}
            :</label>
          <div class="layui-input-inline">
            <input type="text" name="position"
              :placeholder="i18n.language === 'zh-cn' ? '请输入用户描述' : 'Please enter a user description'"
              autocomplete="off" class="layui-input" />
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "所属公司" : "affiliatedCompany" }}
            :</label>
          <div class="layui-input-inline boxs">
            <el-select style="width: 100%" v-model="affiliatedCompany" filterable allow-create default-first-option
              :reserve-keyword="false" placeholder="请选择所属公司">
              <el-option v-for="item in companyList" :key="item.id" :label="item.companyName"
                :value="item.companyName" />
            </el-select>
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label"> </label>
          <div class="layui-input-inline"></div>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "用户性别" : "UserGender" }}
            :</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="1" checked="checked"
              :title="i18n.language === 'zh-cn' ? '男' : 'male'" />
            <input type="radio" name="sex" value="0" :title="i18n.language === 'zh-cn' ? '女' : 'female'" />
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">
            {{ i18n.language === "zh-cn" ? "是否可用" : "IsitAvailable" }}
            :</label>
          <div class="layui-input-inline">
            <input type="radio" name="available" value="1" checked="checked"
              :title="i18n.language === 'zh-cn' ? '可用' : 'available'" />
            <input type="radio" name="available" value="0"
              :title="i18n.language === 'zh-cn' ? '不可用' : 'NotAvailable'" />
          </div>
        </div>
      </div>
      <div class="layui-form-item" style="text-align: center; width: 100%">
        <div class="layui-input-block">
          <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
            lay-filter="doSubmit" lay-submit="">
            {{ i18n.fy.提交 }}
          </button>
          <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">
            {{ i18n.fy.重置 }}
          </button>
        </div>
      </div>
    </form>
  </div>
  <div style="display: none; padding: 10px" id="selectUserRole">
    <table class="layui-hide" id="roleTable" lay-filter="roleTable"></table>
  </div>
  <div style="display: none" id="selectUserDevice">
    <ul id="deviceTree" class="dtree" data-id="0"></ul>
  </div>
  <el-dialog class="dialogPermiss" style="background: #000" v-model="dialogVisible" title="权限列表" width="25%"
    :before-close="handleClose" draggable>
    <div class="PermissionList">
      <el-table :empty-text="i18n.fy.nodata" :data="PermissionList" :element-loading-text="i18n.fy.loading" height="500"
        @selection-change="handleSelectionChange" ref="multipleTableRef">
        <el-table-column type="selection" width="55" align="center" :selectable="selected" />
        <el-table-column prop="description" :label="i18n.language === 'zh-cn' ? '权限名称' : 'description'"
          align="center" />
      </el-table>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePermissionList"> 确定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
defineOptions({ name: "UserList" });
import Query from "@/components/query.vue";
import RightTableLayout from "@/views/workbench/components/RightTableLayout.vue";
import { i18nStore } from "@/pinia/i18n";
const i18n = i18nStore();
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
let $httpUrl = globalProperties.$httpUrl;

let columns = reactive({
  realname: { label: i18n.fy.用户姓名, queryValue: "" },
  loginname: { label: i18n.fy.登录名称, queryValue: "" },
});
let data = reactive({
  queryForm: {
    page: 1,
    limit: 100,
  },
  tableData: [],
  total: 0,
  dialog: false,
  form: {},
  rules: {
    name: [{ required: true, message: "请输入姓名", trigger: "change" }],
    role: [{ required: true, message: "请选择岗位", trigger: "change" }],
  },
});
const reQueryForm = () => {
  // 重置查询表单
  data.queryForm = {
    page: 1,
    limit: 100,
  };
};

const currentChange = (page) => {
  pageData.queryForm.page = page;
  getList();
};

const sizeChange = (size) => {
  data.queryForm.page = size;
  getList();
};

let userid = "";
let roleList = ref([]);
let rolenameList = ref([5]);
// 获取表格数据
const getRoleList = (params) => {
  $axios
    .get("/user/initUserRole?userid=" + userid, {
      page: 1,
      limit: 10000,
    })
    .then((res) => {
      roleList.value = res.data.data;
    });
};

let ridList = ref([]);
const getRole = () => {
  $axios.post("/role/getRole", {}).then((res) => {
    ridList.value = res.data.data.map((item) => {
      return item.role_key;
    });
    getList({});
  });
};
const add = () => {
  // 新增
  rolenameList.value = [5];
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === "zh-cn" ? "新增用户" : "Add User",
    maxmin: true,
    content: $("#saveOrUpdateDiv"),
    area: ["45%", "50%"],
    success: function (index) {
      //清空表单数据
      $("#dataFrm")[0].reset();
      $("input[name=sex][value='1']").prop("checked", true);
      $("input[name=sex][value='0']").prop("checked", false);
      $("input[name=available][value='1']").prop("checked", true);
      $("input[name=available][value='0']").prop("checked", false);
      url = $httpUrl + "/user/addUser";
    },
  });
};

const edit = (data) => {
  // 编辑
  rolenameList.value = [];
  mainIndex = layer.open({
    type: 1,
    title: i18n.language === "zh-cn" ? "修改用户" : "Modify Users",
    maxmin: true,
    content: $("#saveOrUpdateDiv"),
    area: ["45%", "50%"],
    success: function (index) {
      affiliatedCompany.value = data.affiliatedCompany;
      form.val("dataFrm", data);
      url = $httpUrl + "/user/updateUser";
    },
  });
};
// 修改分页数
const onChanSize = (e) => {
  data.queryForm.page = 1;
  data.queryForm.limit = e;
  getList();
};
// 修改分页
const onChanPage = (e) => {
  data.queryForm.page = e;
  getList();
};
// 删除
const del = (data) => {
  layer.confirm((i18n.language === "zh-cn" ? "真的删除" : "Really delete") + "【" + data.realname + "】" + (i18n.language === "zh-cn" ? "这个用户吗" : "Is this user"), function (index) {
    //向服务端发送删除指令
    $.post($httpUrl + "/user/deleteUser", { userid: data.userid }, function (res) {
      layer.msg(res.msg);
      //刷新数据 表格
      getList({});
    });
  });
};
const resetUserPwd = (data) => {
  layer.confirm((i18n.language === "zh-cn" ? "真的重置" : "Really reset") + "【" + data.realname + "】" + (i18n.language === "zh-cn" ? "这个用户的密码吗" : "Is the password for this user"), function (index) {
    //向服务端发送删除指令
    $.post($httpUrl + "/user/resetUserPwd", { userid: data.userid }, function (res) {
      layer.msg(res.msg);
    });
  });
};
const selectUserRole = (data) => {
  mainIndex = layer.open({
    type: 1,
    title: (i18n.language === "zh-cn" ? "分配" : "allocation") + "【" + data.realname + "】" + (i18n.language === "zh-cn" ? "的角色" : "Roleof"),
    content: $("#selectUserRole"),
    area: ["60%", "60%"],
    maxmin: true,
    btnAlign: "c",
    height: "full",
    btn: ['<div class="layui-icon layui-icon-release">' + (i18n.language === "zh-cn" ? "确认分配" : "Confirming assignments") + "</div>", '<div class="layui-icon layui-icon-close">' + (i18n.language === "zh-cn" ? "取消分配" : "Unassign") + "</div>"],
    yes: function (index, layero) {
      //得到选中的数据行
      var checkStatus = table.checkStatus("roleTable");
      var roleData = checkStatus.data;
      var params = "userid=" + data.userid;
      $.each(roleData, function (i, item) {
        params += "&ids=" + item.roleid;
      });
      //保存
      $.post($httpUrl + "/user/saveUserRole", params, function (res) {
        if ((res.code = 200)) {
          layer.msg(res.msg);
          layer.close(mainIndex);
        } else {
          layer.msg(res.msg);
        }
      });
    },
    success: function (index) {
      // //渲染数据表格
      var roleTableIns = table.render({
        elem: "#roleTable", //渲染的目标对象
        url: $httpUrl + "/user/initUserRole?userid=" + data.userid, //数据接口
        title: "角色列表", //数据导出来的标题
        cellMinWidth: 100, //设置列的最小默认宽度
        cols: [
          [
            //列表数据
            { type: "checkbox", fixed: "left" },
            { field: "roleid", title: "ID", align: "center" },
            { field: "rolename", title: i18n.language === "zh-cn" ? "角色名称" : "Rolename", align: "center" },
            { field: "roledesc", title: i18n.language === "zh-cn" ? "角色备注" : "RoleNotes", align: "center" },
          ],
        ],
      });
    },
  });
};

var deviceTree;
const selectUserDevice = (data) => {
  mainIndex = layer.open({
    type: 1,
    title: (i18n.language === "zh-cn" ? "分配" : "allocation") + "【" + data.realname + "】" + (i18n.language === "zh-cn" ? "的设备" : "Devices for"),
    content: $("#selectUserDevice"),
    area: ["30%", "60%"],
    maxmin: true,
    btnAlign: "c",
    btn: ['<div class="layui-icon layui-icon-release">' + (i18n.language === "zh-cn" ? "确认分配" : "Confirming") + "</div>", '<div class="layui-icon layui-icon-close">' + (i18n.language === "zh-cn" ? "取消分配" : "Unassign") + "</div>"],
    yes: function (index, layero) {
      var nodes = dtree.getCheckbarNodesParam("deviceTree");
      var userid = data.userid;
      var params = "userid=" + userid;

      $.each(nodes, function (i, item) {
        params += "&ids=" + item.nodeId;
      });
      //保存用户和设备的关系
      $.post($httpUrl + "/device/saveUserDevice", params, function (res) {
        if (res.code == 200) {
          layer.msg(res.msg);
          layer.close(mainIndex);
        } else {
          layer.msg(res.msg);
        }
      });
    },
    success: function (index) {
      //初始化树
      deviceTree = dtree.render({
        elem: "#deviceTree",
        dataStyle: "layuiStyle", //使用layui风格的数据格式
        response: { message: "msg", statusCode: 0 }, //修改response中返回数据的定义
        dataFormat: "list", //配置data的风格为list
        checkbar: true, //复选框
        checkbarType: "all", // 默认就是all
        checkbarData: "choose",
        url: $httpUrl + "/device/initUserDeviceTreeJson?userId=" + data.userid, // 使用url加载（可与data加载同时存在）
      });
    },
  });
};
let formRef = ref(null);
const submit = () => {
  // 提交新增/编辑表单
  formRef.value.validate((valid) => {
    if (valid) {
    }
  });
};
const arraySort = (propertyName) => {
  return function (object1, object2) {
    var value1 = object1[propertyName];
    var value2 = object2[propertyName];
    if (value1 < value2) {
      return -1;
    } else if (value1 > value2) {
      return 1;
    } else {
      return 0;
    }
  };
};
const getList = (params) => {
  // 获取表格数据
  if (params == undefined) {
    params = {
      loginname: "",
      realname: "",
    };
  }
  let loginname = params.loginname || "";
  let realname = params.realname || "";
  data.loading = true;
  $axios
    .get("/user/selectAllUser", {
      ...data.queryForm,
      ...params,
      limit: 10000,
    })
    .then((res) => {
      data.loading = false;
      res.data.data.records = res.data.data.records.sort(arraySort("userid")); //先按流量排序
      // data.tableData = res.data.data.records
      if (loginname) {
        res.data.data.records = res.data.data.records.filter((item) => {
          return item.loginname.includes(loginname);
        });
      }
      if (realname) {
        res.data.data.records = res.data.data.records.filter((item) => {
          return item.realname.includes(realname);
        });
      }
      data.tableData = res.data.data.records.slice((data.queryForm.page - 1) * data.queryForm.limit, data.queryForm.page * data.queryForm.limit);
      if (useridCurt == "") {
        let obj = res.data.data.records[res.data.data.records.length - 1];
        let params2 = "userid=" + obj.userid + "&ids=5";
        $.post($httpUrl + "/user/saveUserRole", params2, function (res) { });
      }
      data.total = res.data.data.total;
    });
};
const doQuery = (params) => {
  getList(params);
};

const formToJson = (data) => {
  data = data.replace(/&/g, '","');
  data = data.replace(/=/g, '":"');
  data = '{"' + data + '"}';
  return data;
};
const showType = (type) => {
  if (type == -1) return "系统";
  if (type == 0) return "云平台";
  if (type == 1) return "云产品";
  if (type == 2) return "云设备";
};
var tableIns;
var loadIndex;
var $ = "";
var layer = "";
var form = "";
var table = "";
var dtree = "";
var url = "";

var mainIndex = "";
let affiliatedCompany = ref("");
let useridCurt = null;
let companyList = ref([]);
const getcompany = () => {
  $axios.get("/company", {}).then((res) => {
    companyList.value = res.data.data;
  });
};

const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value.clearSelection();
  }
};

let PermissionList = ref([]);
let dialogVisible = ref(false);
let multipleTableRef = ref(null);
let currentRow = {};
const assign = (row) => {
  currentRow = row;
  $axios.get("/role/getPermissionList", {}).then((res) => {
    let dataTable = res.data.data;
    $.post(
      $httpUrl + "/role/getUserAndRolePermissions",
      {
        userid: row.userid,
      },
      function (res) {
        PermissionList.value = dataTable;
        for (let i = 0; i < res.data.length; i++) {
          if (check(res.data[i].permission_id)) {
            window.setTimeout(function () {
              toggleSelection([check(res.data[i].permission_id)]);
            }, 300);
            for (let j = 0; j < PermissionList.value.length; j++) {
              if (PermissionList.value[j].permission_id == res.data[i].permission_id) {
                PermissionList.value[j].is_role = res.data[i].is_role;
              }
            }
          }
        }
      }
    );
  });
  dialogVisible.value = true;
};
let multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
const selected = (row, index) => {
  if (row.is_role == "true") {
    return false; //不可勾选
  } else {
    return true; //可勾选
  }
};
const handleClose = () => {
  dialogVisible.value = false;
};
const check = (id) => {
  let arr = PermissionList.value.filter((item) => {
    return id == item.permission_id;
  });
  if (arr.length > 0) {
    return arr[0];
  } else {
    return false;
  }
};
const savePermissionList = (val) => {
  let params = { ids: "", userid: currentRow.userid };
  multipleSelection.value.map((item) => {
    params.ids = params.ids + item.permission_id + ",";
  });
  params.ids = params.ids.substring(0, params.ids.lastIndexOf(","));
  $.post($httpUrl + "/role/setUserPermission", params, function (res) {
    if (res.code == 200) {
      layer.msg("保存成功");
    } else {
      layer.msg(res.message);
    }
    dialogVisible.value = false;
  });
};
onMounted(() => {
  getcompany();
  //getRoleList();
  getRole();
  layui
    .extend({
      dtree: "/layui_ext/dist/dtree",
    })
    .use(["jquery", "layer", "form", "table", "dtree"], function () {
      $ = layui.jquery;
      layer = layui.layer;
      form = layui.form;
      table = layui.table;
      dtree = layui.dtree;
      //保存
      form.on("submit(doSubmit)", function (obj) {
        //序列化表单数据
        var params = $("#dataFrm").serialize();
        params = params + "&affiliatedCompany=" + affiliatedCompany.value;
        let json_data = JSON.parse(formToJson(params));
        useridCurt = json_data.userid;
        $.post(url, params, function (res) {
          if (res.code == 200) {
            layer.msg(res.msg);
            //关闭弹出层
            layer.close(mainIndex);
            //刷新数据 表格
            //  tableIns.reload();
            getList({});
          } else {
            layer.msg(res.msg);
          }
        });
      });
    });
});
</script>

<style lang="scss" scoped>
.available1 {
  color: orangered;
}

#menuToolBar {
  display: flex;
  justify-content: left;
  align-items: left;
  flex: 1;
  padding-left: 20px;
}

.layui-form-label {
  width: 100px;
}

:deep(.boxs .el-input__wrapper) {
  background: none;
  color: #fff;
}

:deep(.boxs .el-input__wrapper input) {
  background: none;
  color: #fff;
}

:deep(.rolenameList .el-input__wrapper) {
  background: none;
}

:deep(.dialogPermiss .is-horizontal) {
  display: none !important;
}

:deep(.dialogPermiss .el-dialog__title) {
  color: #fff !important;
}

:deep(.PermissionList .el-table td.el-table__cell div) {
  color: #fff !important;
}

:deep(.PermissionList .el-table th .cell) {
  color: #fff !important;
  font-weight: bold;
}

:deep(.PermissionList .el-table td) {
  border-left: solid 1px #ccc !important;
  border-top: solid 1px #ccc !important;
  border-left: solid 1px #ccc !important;
}

:deep(.PermissionList .el-table th) {
  border-left: solid 1px #ccc !important;
  border-top: solid 1px #ccc !important;
  border-left: solid 1px #ccc !important;
}

:deep(.PermissionList .is-vertical .el-scrollbar__thumb) {
  background: #ccc !important;
}

:deep(.PermissionList .el-table__inner-wrapper) {
  border-right: solid 1px #ccc !important;
  overflow-x: hidden;
}

.dialog-footer {
  display: block;
  text-align: center;
}

:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after) {
  border-color: #000;
}

:deep(.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner) {
  background-color: #eee;
}
</style>

<style>
.toLoadAllUser {
  display: flex !important;
}

.layui-layer-page {
  z-index: 223 !important;
}

.layui-layer-shade {
  z-index: 221 !important;
}

.saveTyps .layui-form-item {
  width: 100% !important;
}
</style>
